<template>
  <div class="slot-scope">
    <div>
      <el-table :data="tableData" style="width: 100%">
      <!-- :data="用于存放请求数据回来的数组"  --> 
          <el-table-column label="索引值" width="400">
              <template slot-scope="scope">  <!--  slot-scope="scope" 这里取到当前单元格  -->
                  <span>{{ scope.$index }}</span>  <!-- scope.$index 直接取到该单元格值  -->
              </template>
          </el-table-column>
          <el-table-column label="标题" width="350">
              <template slot-scope="scope">  <!-- slot-scope="scope" 这里取到当前单元格  -->
                  <span>{{ scope.row.title }}</span>
                  <!-- scope.row 直接取到该单元格对象，即是tableData[scope.$index]  -->
                  <!-- .title 是对象里面的title属性的值  -->
              </template>
          </el-table-column>
          <el-table-column label="年龄" width="350">
            <template slot-scope="scope">
              <span>{{ scope.row.age }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">  <!--  slot-scope="scope" 这里取到当前单元格  -->
                  <el-dropdown size="medium" split-button type="primary">
                      更多
                      <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native.prevent="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
                          <el-dropdown-item @click.native.prevent="getUp(scope.$index, scope.row)">上升</el-dropdown-item>
                          <el-dropdown-item @click.native.prevent="getDown(scope.$index, scope.row)">下降</el-dropdown-item>
                          <el-dropdown-item @click.native.prevent="handleDelete(scope.$index, scope.row)">删除</el-dropdown-item>
                          <!-- 这里的点击事件已经不是在根元素上了，因为多套了几层结构。-->
                          <!-- 这里的点击事件如果没有加上 .native 则点击无效！-->
                          <!--这里的点击事件要加上 .native 表示监听组件根元素的原生事件。-->
                          <!-- 这里的点击事件不需要 .prevent 也可以实现相同效果 -->
                      </el-dropdown-menu>
                  </el-dropdown>
              </template>
          </el-table-column>
      </el-table>       
    </div>
  </div>
</template>
<script>
export default {
  name:'slotScope',
  data() {
      return {
        tableData: [
          {title:123,age:11},
          {title:234,age:12},
          {title:345,age:13},
          {title:456,age:14},
          {title:567,age:15},
          {title:678,age:16},
          {title:789,age:17},
          ]
          //---为了效果先给值，一般情况下为空，其实际值是后台接口请求回来的
        }
    },
  methods:{
      handleDelete(index, row) {
        this.tableData.splice(index, 1);
      },
      getUp(index,row){
        console.log('上');
      },
      getDown(index,row){
        console.log('下');
      }
    }
  }
</script>